<!--
//
// PermissionTree_.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/12.
//
-->
<template>
    <div class="PermissionTree">
        <!-- 目录 -->
        <div v-for="directory in list" :key="directory.id" class="row">
            <div class="title">
                <b-icon v-if="directory.children && directory.children.length>0" :class="directory.isOpen ? 'open-action' : ''" class="action" name="bi-caret-right-fill" size="14" @click="directory.isOpen = !directory.isOpen"/>
                <div v-else class="action-placeholder"></div>
                <el-checkbox v-model="directory.hasPerm">
                    <b-icon class="directory" name="bi-book" size="14"/>
                    <span class="label">{{ directory.name }}</span>
                </el-checkbox>
            </div>
            <!-- 如果存在子节点 -->
            <div v-if="directory.children" :class="directory.isOpen ? 'show-list': ''" class="list">
                <template v-for="page in directory.children" :key="page.id">
                    <!-- 如果目录的子节点是页面 -->
                    <div v-if="page.type === 1" class="row">
                        <div class="title">
                            <b-icon v-if="page.children && page.children.length>0" :class="page.isOpen ? 'open-action' : ''" class="action" name="bi-caret-right-fill" size="14" @click="page.isOpen = !page.isOpen"/>
                            <div v-else class="action-placeholder"></div>
                            <el-checkbox v-model="page.hasPerm">
                                <b-icon class="page" name="bi-bookmark" size="14"/>
                                <span class="label">{{ page.name }}</span>
                            </el-checkbox>
                        </div>
                        <div :class="page.isOpen ? 'show-list': ''" class="list">
                            <!-- 数据权限站位区域（暂时无数据权限功能） -->
                            <!--<div class="data-perm"></div>-->
                            <div v-if="page.children" class="perms">
                                <!-- 页面的子节点-功能权限 -->
                                <div v-for="perm in page.children" :key="perm.id" class="perm">
                                    <el-checkbox v-model="perm.hasPerm">
                                        <span class="label">{{ perm.name }}</span>
                                    </el-checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 如果目录的子节点是功能权限 -->
                    <div v-if="page.type === 2" class="perm">
                        <el-checkbox v-model="page.hasPerm">
                            <span class="label">{{ page.name }}</span>
                        </el-checkbox>
                    </div>
                </template>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "PermissionTree",
    emits: ["update:value"],
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    mounted() {
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.PermissionTree {
    //height: 100%;
    //max-height: 600px;
    overflow: auto;

    .row {
        .title {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .action {
                cursor: pointer;
                width: 20px;
                height: 20px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                transition: all 0.1s ease;
                margin-right: 4px;
            }

            .open-action {
                transform: rotateZ(90deg);
            }

            .action-placeholder {
                width: 20px;
                height: 20px;
                margin-right: 4px;
            }

            .directory {
                padding: 2px 4px;
                color: var(--el-color-primary);
            }

            .page {
                padding: 2px 4px;
                color: var(--el-color-success);
            }
        }

        .list {
            padding-left: 25px;
            height: 0;
            overflow: hidden;

            .data-perm {
                padding: 10px;
                border: 1px solid #e8e8e8;
                margin-bottom: 10px;
            }

            .perms {
                padding: 10px 10px 0 10px;
                border: 1px dashed #e8e8e8;
            }

            .perm {
                display: inline-flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                margin-bottom: 10px;
            }
        }

        .show-list {
            height: auto;
        }
        .label {
            color: #333 !important;
            font-weight: normal;
        }
    }

}
</style>
